<template>
<div>

  <section class="main isPc">
    <section class="order">
      <p class="pTitle">
        <router-link tag="a" to="/">首页</router-link> - 
        <router-link tag="a" to="/about">我的主页</router-link> - 
        <router-link tag="a" to="/orderList">我的订单</router-link> - 
        订单详情
      </p>
      <div class="info">
        <div class="orderList orderDesc">
          <div class="item">
            <p class="title">商品信息</p>
            <div class="itemInfo">
              <ul>
                <li class="top">
                  <p class="t1">商品</p>
                  <p class="t2">单价</p>
                  <p class="t3">数量</p>
                  <p class="t4">小计</p>
                </li>
                <li v-for="list in orderData.order_items">
                  <p class="t1">
                    <router-link :to="'prcShow?id='+list.goods_id"><img v-lazy="list.goods_logo"> </router-link><router-link :to="'prcShow?id='+list.goods_id">{{list.goods_name}} </router-link>
                  </p>
                  <p class="t2">£{{list.goods_price|allPrice}}</p>
                  <p class="t3">{{list.goods_count}}</p>
                  <p class="t4">£{{list.total_price|allPrice}}</p>
                </li>
              </ul>
            </div>
            <div class="itemBottom">
              <div v-if="orderData.ratio!=100" class="addDiv">
                <p class="addP old">原价：<span>£{{orderData.amount|allPrice}}</span></p>
                <p class="addP">折扣：<span>{{orderData.ratio|aa}}折</span></p>
                <p class="addP">总价：<span>£{{orderData.order_amount|allPrice}}</span></p>
              </div>
              <div v-if="orderData.ratio==100" class="addDiv">
                <p class="addP">总价：<span>£{{orderData.order_amount|allPrice}}</span></p>
              </div>
            </div>
            <p class="title">订单信息</p>
            <div class="descList">
              <p><span>订单编号：</span>{{orderData.trade_no}}</p>
              <p><span>下单时间：</span>{{orderData.created_at}}</p>
              <p><span>支付方式：</span>货到付款</p>
              <p v-if="orderData.pay_type"><span>配送时间：</span>{{orderData.pay_type.type_name}}</p>
            </div>
            <p class="title">收货人信息</p>
            <div class="descList">
              <p><span>收货人姓名：</span>{{orderData.order_username}}</p>
              <p v-if="orderData.user_address"><span>收货地址：</span>{{orderData.user_address.address}}</p>
              <p><span>电话：</span>{{orderData.order_tellphone}}</p>
              <p><span>电子邮件：</span>{{orderData.user.email}}</p>
            </div>
            <p class="title">备注信息</p>
            <div class="descList">
              <p>{{orderData.remark}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </section>

  <section class="mainWap isWap">
    <p class="wapTopTitle">个人中心</p>
    <p class="wapTopTxtle">个人中心-我的订单-订单详情</p>

        <div v-if="orderData!=''" class="orderList orderDesc orderDescWap">
          <div class="item">
            <p class="title">商品信息</p>
            <div class="itemInfo">
              <ul>
                <li v-for="list in orderData.order_items">
                  <p class="t1">
                    <router-link :to="'prcShow?id='+list.goods_id"><img v-lazy="list.goods_logo"> </router-link><router-link :to="'prcShow?id='+list.goods_id">{{list.goods_name}} </router-link>
                  </p>
                  <div class="tr">
                    <p class="t2">£{{list.goods_price|allPrice}}</p>
                    <p class="t3">{{list.goods_count}}</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="itemBottom">
              <div v-if="orderData.ratio!=100" class="addDiv">
                <p class="addP old">原价：<span>£{{orderData.amount|allPrice}}</span></p>
                <p class="addP">折扣：<span>{{orderData.ratio|aa}}折</span></p>
                <p class="addP">总价：<span>£{{orderData.order_amount|allPrice}}</span></p>
              </div>
              <div v-if="orderData.ratio==100" class="addDiv">
                <p class="addP">总价：<span>£{{orderData.order_amount|allPrice}}</span></p>
              </div>
            </div>
            <p class="title">订单信息</p>
            <div class="descList">
              <p><span>订单编号：</span>{{orderData.trade_no}}</p>
              <p><span>下单时间：</span>{{orderData.created_at}}</p>
              <p><span>支付方式：</span>货到付款</p>
              <p v-if="orderData.pay_type"><span>配送时间：</span>{{orderData.pay_type.type_name}}</p>
              <p><span>收货人姓名：</span>{{orderData.order_username}}</p>
              <p v-if="orderData.user_address"><span>收货地址：</span>{{orderData.user_address.address}}</p>
              <p><span>电话：</span>{{orderData.order_tellphone}}</p>
              <p><span>电子邮件：</span>{{orderData.user.email}}</p>
            </div>
            <p class="title">备注信息</p>
            <div class="descList last">
              <p>{{orderData.remark}}</p>
            </div>
          </div>
        </div>

  </section>
  
</div>
</template>


<script>
import axios from 'axios'
import {Get} from '@/config/api.js'
export default {
  name: 'order',
  data() {
    return {
      loadStart: false,
      orderData:{
        user_address:{
          address:''
        },
        user:{
          email:''
        },
        pay_type:{
          type_name:''
        }
      }
    }
  },
  created() {
    this.$store.dispatch("isLoading",false)
  },
  mounted() {
    this.vLogin()
    this.getData()
    this.$store.dispatch("isLoading",false)
  },
  filters:{
    aa(val){
      return val/10
    }
  },
  methods: {
    //请求数据
    async getData() {
      if (this.vLogin()) {
        this.$store.dispatch("isLoading",true)
        let reg=await Get('/order/'+this.$route.query.id+'?_include=user,order_items,user_address,pay_type',this.$store.state.token)
        this.orderData=reg.data
        this.$store.dispatch("isLoading",false)
      }
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
